<template>
	<uni-popup  ref="popup" type="center">
		
		<view class="mask-content">
			<view class="mask-content-topbar">
				<view class="left" @click="toggleMask">取消</view>
				<view class="right" @click="pubComment">发布</view>
			</view>
			<view class="mask-content-input">
				<textarea
					class="textarea"
					v-model="content"
					:placeholder="placeholder"
					:cursor-spacing="100"
					:show-confirm-bar="false"
					:focus="true"
					maxlength="140"
				></textarea>
			</view>
		</view>
		
	</uni-popup>
</template>

<script>
export default {
	name: "ygcComment",
	//属性
	props: {
		placeholder: {
			type: String
		}
	},
	data() {
		return {
			content: "",
			focus: true
		};
	},
	created() {},
	methods: {
		stopPrevent() {},
		toggleMask(type) {
			let state = type === "show" ? true :false;
			state?this.$refs.popup.open():this.$refs.popup.hidden()
		},
		pubComment() {
			if (this.content == "") {
				this.msg("请输入评论内容");
				return;
			}
			this.$emit("pubComment", this.content);
		}
	}
};
</script>

<style lang="scss" scoped>
$font-color-base: #606266;
$base-color: #0fa7ff;
.mask-content {
	width:750upx;
	background: #ffffff;
	.mask-content-topbar {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 20upx 30upx 10upx;
		font-size: 32upx;
		.left {
			padding: 10upx 0upx;
			color: $font-color-base;
		}
		.right {
			padding: 10upx 100upx;
			border-radius: 6upx;
			color: #ffffff;
			font-weight: 500;
			background-color: $base-color;
		}
	}
	.mask-content-input {
		// width: 718upx;//如果textarea的宽带有问题可以把width改为100%试试
		width: 100%;
		padding: 10upx 30upx 20upx;
		.textarea {
			height: 100px;
			// width: 686upx; //如果textarea的宽带有问题可以把width改为100%试试
			width: 100%;
			text-align: left;
			padding: 16upx;
			border: 2upx solid #d5d5d6;
			border-radius: 8upx;
		}
	}
}
</style>
